<template>
	<kui-page :customHeader="false">
		<template v-slot:body>
			<view class="kui-mt-3 kui-flex">
				<kui-config-provider font-size="18px" color="#666">
					<view class="kui-h-full kui-w-full">
						<view class="kui-mt-0">
							<kui-text>主题色按钮</kui-text>
							<view class="kui-mt-3">
								<kui-space :gap="[40,20]">
									<kui-button @click="taped" type="primary">主要按钮</kui-button>
									<kui-button type="info">信息按钮</kui-button>
									<kui-button>默认按钮</kui-button>
									<kui-button type="success">成功按钮</kui-button>
									<kui-button type="warning">警告按钮</kui-button>
									<kui-button type="danger">危险按钮</kui-button>
									<kui-button type="danger" background-color="orange" text-color="black">自定义按钮</kui-button>
								</kui-space>
							</view>
						</view>
						<view class="kui-mt-5">
							<kui-text>文本按钮</kui-text>
							<view class="kui-mt-3">
								<kui-space :gap="[40,20]">
									<kui-button type="primary" outline text>外边框按钮</kui-button>
									<kui-button type="primary" text>纯文字按钮</kui-button>
								</kui-space>
							</view>
						</view>
						<view class="kui-mt-5">
							<kui-text>禁用状态</kui-text>
							<view class="kui-mt-3">
								<kui-space :gap="[40,20]">
									<kui-button type="info" disabled>禁用状态</kui-button>
									<kui-button type="primary" outline text disabled>禁用状态</kui-button>
									<kui-button type="danger" outline text disabled>禁用状态</kui-button>
								</kui-space>
							</view>
						</view>
						<view class="kui-mt-5">
							<kui-text>按钮形状</kui-text>
							<view class="kui-mt-3">
								<kui-space :gap="[40,20]">
									<kui-button type="primary" shape="square">方形按钮</kui-button>
									<kui-button type="warning">胶囊按钮</kui-button>
									<kui-button type="danger" shape="square" :radius="30">自定义圆角大小</kui-button>
								</kui-space>
							</view>
						</view>
						<view class="kui-mt-5">
							<kui-text>圆形按钮</kui-text>
							<view class="kui-mt-3">
								<kui-space :gap="[40,20]">
									<kui-button type="info" shape="round">
										<kui-icons type="plus-round" :size="40"></kui-icons>
									</kui-button>
									<kui-button type="danger" shape="round">
										<kui-icons type="android-alert" :size="50" :top="2"></kui-icons>
									</kui-button>
									<kui-button type="success" shape="round">
										<kui-icons type="checkmark-round" :size="40"></kui-icons>
									</kui-button>
									<kui-button type="warning" shape="round">
										<kui-icons type="alert-circled" :size="50" :top="-3"></kui-icons>
									</kui-button>
									<kui-button background-color="rgba(0,0,0,0.2)" shape="round">
										<kui-icons type="close" :size="50" :top="-1"></kui-icons>
									</kui-button>
								</kui-space>
							</view>
						</view>
						<view class="kui-mt-5">
							<kui-text>加载状态</kui-text>
							<view class="kui-mt-3 kui-flex">
								<kui-space :gap="[40,20]">
									<kui-button type="primary" loading></kui-button>
									<kui-button type="info" loading>加载中...</kui-button>
								</kui-space>
							</view>
						</view>
						<view class="kui-mt-5">
							<kui-text>图标按钮</kui-text>
							<view class="kui-mt-3 kui-flex">
								<kui-space :gap="[40,20]">
									<kui-button type="warning" outline text icon="thumbs-up"></kui-button>
									<kui-button type="primary" icon="thumbs-o-up">点赞</kui-button>
								</kui-space>
							</view>
						</view>
						<view class="kui-mt-5">
							<kui-text>按钮尺寸</kui-text>
							<view class="kui-mt-3">
								<kui-button type="primary" size="large">大号按钮</kui-button>
							</view>
							<view class="kui-mt-3 kui-flex">
								<kui-space align="center" :gap="[40,20]">
									<kui-button type="primary">普通按钮</kui-button>
									<kui-button type="primary" size="small">小型按钮</kui-button>
									<kui-button type="primary" size="mini">迷你按钮</kui-button>
								</kui-space>
							</view>
						</view>
						<view class="kui-mt-5">
							<kui-text>块级按钮</kui-text>
							<view class="kui-mt-3">
								<kui-button type="primary" size="normal" block>块级按钮</kui-button>
							</view>
						</view>
						<view class="kui-mt-5">
							<kui-text>按钮阴影</kui-text>
							<view class="kui-mt-3">
								<kui-space :gap="[40,20]">
									<kui-button type="primary" shadow shadow-size="lg">主要按钮</kui-button>
									<kui-button type="info" shadow shadow-size="lg">信息按钮</kui-button>
									<kui-button shadow shadow-size="lg">默认按钮</kui-button>
									<kui-button type="success" shadow shadow-size="xl">成功按钮</kui-button>
									<kui-button type="warning" shadow shadow-size="xl">警告按钮</kui-button>
									<kui-button type="danger" shadow shadow-size="xl">危险按钮</kui-button>
								</kui-space>
							</view>
						</view>
						<view class="kui-mt-5">
							<kui-text>防抖节流（实际效果请查看控制台）</kui-text>
							<view class="kui-mt-3">
								<kui-space :gap="[40, 20]">
									<kui-button type="primary" :throttle="1" @click="taped">节流演示</kui-button>
									<kui-button type="info" :throttle="2" @click="taped">防抖演示</kui-button>
								</kui-space>
							</view>
						</view>
						<!-- #ifdef MP -->
						<view class="kui-mt-5">
							<kui-text>开放能力</kui-text>
							<view class="kui-mt-3">
								<kui-button type="primary" block size="large" open-type="getUserInfo" @getuserinfo="getUserInfo">获取用户信息</kui-button>
							</view>
							<view class="kui-mt-3">
								<kui-button type="info" size="large" block open-type="feedback">打开反馈</kui-button>
							</view>
							<view class="kui-mt-3">
								<kui-button type="warning" size="large" block open-type="share">用户转发</kui-button>
							</view>
							<view class="kui-mt-3">
								<kui-button type="danger" size="large" block open-type="openSetting">打开授权设置</kui-button>
							</view>
							<view class="kui-mt-3">
								<kui-button type="success" size="large" block open-type="contact">打开客服会话</kui-button>
							</view>
						</view>
						<!-- #endif -->
					</view>
				</kui-config-provider>
			</view>
		</template>
	</kui-page>
</template>

<script lang="ts" setup>
	const taped = () => {
		console.log(22222);
	}
	
	const getUserInfo = (e) => {
		uni.showModal({
			title: '',
			content: e.detail.rawData,
			showCancel: false,
			cancelText: '',
			confirmText: '确定',
			success: res => {},
			fail: () => {},
			complete: () => {}
		});
	}
</script>

<style>

</style>
